<script setup lang="ts">
import dayjs from "dayjs";
import { ref, computed, toRaw, onMounted, reactive } from "vue";
import { PureTableBar } from "@/components/RePureTableBar";
import { useRenderIcon } from "@/components/ReIcon/src/hooks";
import { deviceDetection } from "@pureadmin/utils";
import { getOrderList } from "@/api/order";
import Refresh from "@iconify-icons/ep/refresh";

defineOptions({
  name: "TransactionHistory"
});
const form = reactive({
  orderNum: ""
});

const tableRef = ref();
const contentRef = ref();
const formRef = ref();
const loading = ref(true);
const dataList = ref([]);
const curRow = ref();
const pagination = reactive({
  total: 0,
  pageSize: 10,
  currentPage: 1
});
const columns = [
  {
    label: "订单编号",
    prop: "orderNo"
  },
  {
    label: "产品名称",
    prop: "vipName"
  },
  {
    label: "订单金额",
    prop: "payPrice"
  },
  {
    label: "订单状态",
    prop: "payStatus"
  },

  {
    label: "支付方式",
    prop: "payWay"
  },
  {
    label: "创建时间",
    prop: "createTime",
    minWidth: 160,
    formatter: ({ createTime }) =>
      dayjs(createTime).format("YYYY-MM-DD HH:mm:ss")
  },
  {
    label: "完成时间",
    prop: "createTime",
    minWidth: 160,
    formatter: ({ createTime }) =>
      dayjs(createTime).format("YYYY-MM-DD HH:mm:ss")
  }
];

async function onSearch() {
  loading.value = true;
  const { data } = await getOrderList(toRaw({ ...form, ...pagination }));
  dataList.value = data.records;
  pagination.total = data.total;
  pagination.pageSize = data.pageSize;
  pagination.currentPage = data.currentPage;
  loading.value = false;
}

function handleSizeChange(val) {
  pagination.pageSize = val;
  onSearch();
}

function handleCurrentChange(val) {
  pagination.currentPage = val;
  onSearch();
}
const resetForm = formEl => {
  if (!formEl) return;
  formEl.resetFields();
  onSearch();
};
function rowStyle({ row: { id } }) {
  return {
    cursor: "pointer",
    background: id === curRow.value?.id ? "var(--el-fill-color-light)" : ""
  };
}
onSearch();
</script>

<template>
  <div class="main">
    <el-form
      ref="formRef"
      :inline="true"
      :model="form"
      class="search-form bg-bg_color w-[99/100] pl-8 pt-[12px] overflow-auto"
    >
      <el-form-item label="订单号：" prop="roleTag">
        <el-input
          v-model="form.orderNum"
          placeholder="请输入订单号："
          clearable
          class="!w-[180px]"
        />
      </el-form-item>
      <el-form-item>
        <el-button
          type="primary"
          :icon="useRenderIcon('ri:search-line')"
          :loading="loading"
          @click="onSearch"
        >
          搜索
        </el-button>
        <el-button :icon="useRenderIcon(Refresh)" @click="resetForm(formRef)">
          重置
        </el-button>
      </el-form-item>
    </el-form>

    <div
      ref="contentRef"
      :class="['flex', deviceDetection() ? 'flex-wrap' : '']"
    >
      <PureTableBar
        :class="[!deviceDetection() ? '!w-[70vw]' : 'w-full']"
        style="transition: width 220ms cubic-bezier(0.4, 0, 0.2, 1)"
        title="交易中心 "
        :columns="columns"
        @refresh="onSearch"
      >
        <template v-slot="{ size, dynamicColumns }">
          <pure-table
            ref="tableRef"
            align-whole="center"
            showOverflowTooltip
            table-layout="auto"
            :loading="loading"
            :size="size"
            adaptive
            :row-style="rowStyle"
            :adaptiveConfig="{ offsetBottom: 108 }"
            :data="dataList"
            :columns="dynamicColumns"
            :pagination="pagination"
            :paginationSmall="size === 'small' ? true : false"
            :header-cell-style="{
              background: 'var(--el-fill-color-light)',
              color: 'var(--el-text-color-primary)'
            }"
            @page-size-change="handleSizeChange"
            @page-current-change="handleCurrentChange"
          />
        </template>
      </PureTableBar>
    </div>
  </div>
</template>

<style scoped lang="scss">
:deep(.el-dropdown-menu__item i) {
  margin: 0;
}

.main-content {
  margin: 24px 24px 0 !important;
}

.search-form {
  :deep(.el-form-item) {
    margin-bottom: 12px;
  }
}
</style>
